<?php

use yii\helpers\Url;

/* @var $this yii\web\View */
/* @var $city \common\models\City[] */
$this->title = '马拉松PB兔战绩测评';
?>
<!-- step1 -->
<section class="page-section page-form page-step page-step1 page-step-active">
    <div class="banner"></div>
    <form action="">
        <div class="form-box">
            <div class="form-title">请填写资料</div>
            <ul class="form-content">
                <li class="form-item required">
                    <span class="flex-item form-item-label">尊姓大名</span>
                    <div class="flex-item form-item-content">
                        <input type="text" name="name" placeholder="请输入姓名">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">开始参赛时间</span>
                    <div class="flex-item form-item-content has-arrow">
                        <input type="date" name="start" placeholder="请输入开跑时间">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">半马参赛次数</span>
                    <div class="flex-item form-item-content has-arrow">
                        <input type="text" name="ban_num" placeholder="请输入参加次数">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">半马PB</span>
                    <div class="flex-item form-item-content multi-input">
                        <input type="tel" class="times" name="bh" value="00" data-max="6" data-class="小时">
                        <span class="colon">:</span>
                        <input type="tel" class="times" name="bm" value="00" data-max="60" data-class="分钟">
                        <span class="colon">:</span>
                        <input type="tel" class="times" name="bs" value="00" data-max="60" data-class="秒">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">全马参赛次数</span>
                    <div class="flex-item form-item-content has-arrow">
                        <input type="text" name="q_num" placeholder="请输入参加次数">
                    </div>
                </li>
                <li class="form-item required">
                    <span class="flex-item form-item-label">全马PB</span>
                    <div class="flex-item form-item-content multi-input">
                        <input type="tel" class="times" name="qh" value="00" data-max="6" data-class="小时">
                        <span class="colon">:</span>
                        <input type="tel" class="times" name="qm" value="00" data-max="60" data-class="分钟">
                        <span class="colon">:</span>
                        <input type="tel" class="times" name="qs" value="00" data-max="60" data-class="秒">
                    </div>
                </li>
            </ul>
        </div>
        <div class="form-btn step1 step-next">下一步</div>
    </form>

</section>
<!-- step2 -->
<section class="page-section page-form page-step page-step2">
    <div class="banner"></div>
    <form action="">
        <div class="form-box">
            <div class="form-title">选择赛事</div>
            <ul class="form-content form-create">
                <li class="form-item form-adds">
                    <span class="flex-item form-item-label">参加过的赛事</span>
                    <div class="flex-item form-item-content has-arrow" id="select-competition">
                        <!-- <span class="placeholder" id="parts">选择赛事名称</span> -->
                        <input type="text" placeholder="选择赛事名称" disabled>
                    </div>
                    <!-- <button type="button" class="form-control-remove"></button> -->
                </li>
                <li class="form-item">
                    <!-- <span class="flex-item form-item-label"></span> -->
                    <div class="flex-item form-item-content" id="add-item">
                        <span class="placeholder add" id="add-competition">添加自定义赛事</span>
                    </div>
                </li>
            </ul>
        </div>

        <div class="clearfix form-btn-group">
            <div class="form-btn step2 step-prev">上一步</div>
            <div class="form-btn step2 step-next form-submit">下一步</div>
        </div>
    </form>
    <!-- 选择赛事弹出层 -->
    <div class="pop-selection" id="pop-selection">
        <div class="form-box">
            <div class="form-title">请选择参加过的赛事名称</div>
            <ul class="form-content">
                <?php
                    foreach ($city as $k => $v) {
                        ?>
                        <li class="form-item">
                            <span class="flex-item form-item-label"><?= $v->name ?></span>
                            <div class="flex-item form-item-content no-pd">
                                <input type="checkbox" name="city" value="<?= $v->id ?>">
                            </div>
                        </li>
                        <?php
                    }
                ?>
            </ul>
        </div>
        <div class="form-btn" id="pop-btn">确认选择</div>
    </div>
</section>
<!-- step3 -->
<!-- <section class="page-section page-form page-step page-step3"></section> -->
<div class="alert">
    <div class="alert-box">
        <div class="alert-content">提示</div>
        <div class="alert-btn">确定</div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>

    $(function() {

        // 设置默认时间
        var date = new Date();
        var defaultDate = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        setTimeout(function(){
            $('input[name="start"]').val(defaultDate);
        }, 1000);

        // 删除赛事名称
        $('.form-content').on('click', '.form-control-remove', function(){
            $(this).closest('.form-item:not(.form-adds)').slideUp(function(){
                $(this).remove();
            })
        })

        // 新增自定义赛事
        $('#add-item').on('click', function(){
            $(this).parent().before(`
                    <li class="form-item form-create-adds">
                        <span class="flex-item form-item-label">参加过的赛事</span>
                        <div class="flex-item form-item-content" id="select-competition">
                            <!-- <span class="placeholder" id="parts">选择赛事名称</span> -->
                            <input type="text" placeholder="请输入参加过的赛事">
                        </div>
                        <button type="button" class="form-control-remove"></button>
                    </li>
                `)
        })

        // 选择弹出框
        $('#select-competition').on('click', function () {
            $('#pop-selection').show();
        })

        var text = []
        $('#pop-btn').on('click', function () {
            // text.push($('#pop-selection input:checked').parent().prev().text())
            $('#pop-selection').hide();
            $('#pop-selection input:checked').each(function(item,value){
                text.push(value.value)
            })
            $('#select-competition input').val('已选择' + text.length + '项')
        })

        $(".required input").blur(function(){
            var $this = $(this);
            var $parent = $this.closest('.form-item');
            $this.val() === '' ? $parent.addClass('form-error') : $parent.removeClass('form-error')

            if ($this.attr('name') === 'tel') {
                // 验证电话
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        $('.times').blur(function() {
            var _this = $(this);
            if (_this.val() > _this.data('max')) {
                // alert('此项最大值不能超过'+_this.data('max')+_this.data('class'))
                $('.alert').fadeIn().find('.alert-content').empty().text('此项最大值不能超过'+_this.data('max')+_this.data('class'))
                _this.val(_this.data('max'))
            }
            _this.val(parseInt(_this.val()).toString().padStart(2, '0'))
        })

        $('.alert .alert-btn').on('click', function() {
            $('.alert').fadeOut()
        })

        // 提交
        $('.form-submit').on('click', function() {
            // $('.form-create .form-item input')
            $('.page-step2 .form-create-adds').each(function(item,value) {
                var vals = $('.form-create-adds').eq(item).find('input').val()
                text.push(vals)
            })

            $(".page-step2 .required input").trigger("blur");
            if ($('.page-step2 .form-error').length !== 0) {
                alert('请填写参赛信息')
                return false;
            }

            var _csrf = '<?= Yii::$app->request->csrfToken ?>';
            var object = {
                name: $('input[name="name"]').val(),
                start: $('input[name="start"]').val(),
                ban_num: $('input[name="ban_num"]').val(),
                ban_result: $('input[name="bh"]').val()+':'+$('input[name="bm"]').val()+':'+$('input[name="bs"]').val(),
                q_num: $('input[name="q_num"]').val(),
                q_result: $('input[name="qh"]').val()+':'+$('input[name="qm"]').val()+':'+$('input[name="qs"]').val(),
                events: text,
                "_csrf-frontend": _csrf
            }

            $.post('/index.php?r=share/submit', object, function (data) {
                if (data.status == 'y') {
                    window.location.href = '/index.php?r=share/show&id=' + data.data.id;
                } else {
                    alert(data.msg);
                }
            }, 'json')
        })

        // 界面切换
        $('.step1').on('click', function(){

            $('.page-step1 .form-create-adds').each(function(item,value) {
                var vals = $('.form-create-adds').eq(item).find('input').val()
                text.push(vals)
            })

            $(".page-step1 .required input").trigger("blur");
            if ($('.page-step1 .form-error').length !== 0) {
                alert('请填写参赛信息')
                return false;
            }

            $('.page-step1').removeClass('page-step-active');
            $('.page-step2').addClass('page-step-active');
        })

        $('.step2.step-prev').on('click', function(){
            $('.page-step2').removeClass('page-step-active');
            $('.page-step1').addClass('page-step-active');
        })
    })

</script>
